<template>
  <div>
    <el-form :model="formVal">
      <el-row :gutter="10">
        <el-col
          v-bind="getColProps(item)"
          v-for="(item, index) in props.options"
          :key="index"
        >
          <el-form-item :label="item.label">
            <template v-if="item.type === 'daterange'">
              <el-date-picker
                v-model="formVal[item.key]"
                type="daterange"
                range-separator="-"
                start-placeholder="开始时间"
                value-format="YYYY-MM-DD"
                end-placeholder="结束时间"
                :shortcuts="shortcutsOptions"
                :clearable="item.clearable == undefined ? true : item.clearable"
                @change="
                  (val) => handleDateChange(val, item.dict[0], item.dict[1])
                "
              />
            </template>
            <template v-if="item.type === 'select'">
              <el-select
                v-model="formVal[item.key]"
                :placeholder="item.tip ? item.tip : `请选择${item.label}`"
                :clearable="item.clearable == undefined ? true : item.clearable"
              >
                <el-option
                  v-for="option in item.dict.options"
                  :key="option.value"
                  :label="option.label"
                  :value="option.value"
                />
              </el-select>
            </template>
            <template v-if="item.type === 'input'">
              <el-input
                v-model="formVal[item.key]"
                :placeholder="item.tip ? item.tip : `请输入${item.label}`"
                :clearable="item.clearable == undefined ? true : item.clearable"
              />
            </template>
          </el-form-item>
        </el-col>
        <!-- 操作按钮区 -->
        <el-form-item label="" class="operation">
          <slot name="suffixPre"></slot>
          <el-button type="primary" @click="handleSearch" class="btn_search">
            <el-icon style="margin-right: 4px">
              <Search />
            </el-icon>
            查询
          </el-button>
          <el-button @click="handleReset" class="btn">
            <el-icon><RefreshRight /></el-icon>
            重置
          </el-button>
          <slot name="suffix"></slot>
        </el-form-item>
      </el-row>
    </el-form>
    <!-- 通过插槽传入具体表格内容 -->
    <slot :filteredData="formVal"></slot>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
// 由于找不到模块 "@/utils/options"，暂时注释掉该导入语句，需要确认该文件是否存在。
// 如果文件存在，可能需要检查项目的路径别名配置。
// import { shortcutsOptions } from "@/utils/options";
import { Search, RefreshRight } from "@element-plus/icons-vue";

const emits = defineEmits<{
  (e: "search", form: any, page?: number): void;
}>();

const props = withDefaults(
  defineProps<{
    options: any[];
  }>(),
  {
    options: () => [],
  }
);

// 默认列props
const getColProps = (item: any) => {
  if (item.props) {
    return item.props;
  } else {
    return { xs: 24, sm: 12, md: 8, lg: 6, xl: 6 };
  }
};

// 表单数据
const formVal = ref<any>({});

// 初始化表单
const initFromVal = () => {
  props.options.forEach((item) => {
    formVal.value[item.key] =
      typeof item.value !== "undefined" ? item.value : null;
    // 时间区间
    if (item.type === "daterange") {
      formVal.value[item.dict[0]] = "";
      formVal.value[item.dict[1]] = "";
      return;
    }
  });
};

// 时间区间选择
const handleDateChange = (val: string[] | null, key1: string, key2: string) => {
  formVal.value[key1] = val ? val[0] : "";
  formVal.value[key2] = val ? val[1] : "";
};

// 搜索
const handleSearch = () => {
  emits("search", formVal.value, 1);
};
// 重置
const handleReset = () => {
  initFromVal();
  emits("search", formVal.value, 1);
};

initFromVal();
</script>

<style lang="scss" scoped>
.operation {
  margin-left: 10px;
  flex: 1;
}
</style>